<!--
 * @Date: 2023-03-31 16:17:31
 * @LastEditTime: 2023-04-04 11:35:50
 * @FilePath: /nlk/src/views/coinExchange/components/exchangeLogs.vue
 * 介绍:
-->
<script lang="ts" setup>
import { apiExchangeLogs, ExchangeLogs } from "@@/api/module/pagingList";
import useBalanceStore from "@@/store/useBalanceStore";
import { formatNumber } from "@@/utils/tools/tools";
import dayjs from "dayjs";
import CrequestList from "@@/components/common/CrequestList/CrequestList.vue";

const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);
function getLogo(code: string) {
  return coinEnum.value[code]?.logo;
}
const CrequestListRef = ref<InstanceType<typeof CrequestList>>();
function apiReset() {
 return CrequestListRef.value!?.apiReset();
}
defineExpose({ apiReset });
</script>

<template>
  <h3 class="MT-lg">{{ $t('shan-dui-ji-lu') }}</h3>
  <CrequestList
    :api="apiExchangeLogs"
    :pull-refresh="false"
    ref="CrequestListRef"
    min-height="500rem"
  >
    <template #item="{ item }: { item: ExchangeLogs.ResItem }">
      <div class="listItem" :key="item.id">
        <div class="flex-J-SB flex-A-C">
          <div class="C-T3">
            {{ dayjs(item.created_at).format("MM.DD HH:mm") }}
          </div>
          <Rimage width="1.2em" height="1.2em" :src="coinEnum.NLK?.logo" />
        </div>
        <!-- 数据 -->
        <Ccard bg="var(--C-B2)" class="contentCard flex-A-C flex-J-SB MT-md">
          <div>
            <div class="flex-A-C">
              <Rimage
                width="1.5em"
                height="1.5em"
                :src="getLogo(item.fromcoin.code)"
              />
              <h3 class="ML-xs">{{ item.fromcoin.code }}</h3>
            </div>
            {{ formatNumber(item.number) }}
          </div>
          <VanDivider class="VanDivider">
            <van-icon name="success" />
          </VanDivider>
          <div>
            <div class="flex-A-C">
              <Rimage
                width="1.5em"
                height="1.5em"
                :src="getLogo(item.tocoin.code)"
              />
              <h3 class="ML-xs">{{ item.tocoin.code }}</h3>
            </div>
            {{ formatNumber(item.actual_number) }}
          </div>
        </Ccard>
      </div>
    </template>
  </CrequestList>
</template>

<style lang="less" scoped>
.listItem {
  margin-top: var(--gap-sm);
  border-radius: var(--R-sm);
  border: solid 1rem var(--C-OT3);
  padding: var(--gap-md);
  .VanDivider {
    flex: 1;
    margin: 0 var(--gap-md);
    --van-divider-content-padding: 0;
  }
  .contentCard {
    padding: var(--gap-sm);
  }
}
</style>
